<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <el-page-header @back="goBack" title="返回" content="套餐列表">
        </el-page-header>
      </div>
      <div class="package-auto">
        <div class="package-item" v-for="item in list" :key="item.id">
          <el-card :body-style="{ padding: '0px'}">
            <div slot="header">
              <el-tag><i class="el-icon-bank-card"></i>&nbsp;{{item.title}}</el-tag>
            </div>
            <div style="padding: 5px">
              <div style="padding: 5px;text-align: center">
                <el-row>
                  <el-col :span="4">支持</el-col>
                  <el-col :span="16" style="text-align: left">功能</el-col>
                  <el-col :span="4">单位</el-col>
                </el-row>
              </div>

              <div v-for="function_item in item['package_functions']" style="padding: 5px;text-align: center">
                <el-row>
                  <el-col :span="4">
                    <i class="el-icon-check" v-if="function_item.package_package_function_status"></i>
                    <i class="el-icon-close" v-if="!function_item.package_package_function_status"></i>
                  </el-col>
                  <el-col :span="16" style="text-align: left">{{function_item.title}}</el-col>
                  <el-col :span="4">{{function_item.quantity}}{{function_item.unit}}</el-col>
                </el-row>
              </div>
            </div>
            <div style="padding: 14px;">
<!--              <div style="padding: 5px;font-size: 20px;text-align: center">-->
<!--                <el-tag type="warning" effect="dark" size="medium" style="font-size: 20px">￥{{item.price}}</el-tag>-->
<!--              </div>-->
              <div style="padding: 5px;font-size: 20px;text-align: center">
                ￥{{item.price}}
              </div>
              <div style="padding: 5px;">
                <el-button size="medium" type="primary" :loading="loading" style="width: 100%" @click="onOrderCreate(item)">立即购买</el-button>
              </div>

            </div>
          </el-card>
        </div>

      </div>
    </el-card>

  </div>
</template>

<script>
import { getList } from '@/api/package'
export default {
  name: 'PackageList',
  components: { },
  data() {
    return {
      loading: false,
      list: []
    }
  },
  created() {
    this.onList()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    onList() {
      const loading = this.$loading({
        lock: true,
        text: this.$t('common.loadingText'),
        spinner: 'el-icon-loading'
      })
      getList({ page: 1, per_page: 20 }).then(res => {
        this.list = res.data
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    onOrderCreate(item) {
      this.$router.push('/order/create?package_id=' + item.id)
    }
  }
}
</script>
<style scoped>
  .package-auto{
    padding: 50px;
    padding-top: 10px;
    float: left;
  }
  .package-auto .package-item{
    width: 400px;
    min-height: 400px;
    padding: 20px;
    float: left;
  }
  .package-name{
    font-size: 20px;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>

